<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>资金队列</span>
      </div>
      <div class="funds-box">
        <div class="fundsApplyList-box">
          <el-tabs type="border-card" @tab-click="onTabsClick">
            <el-tab-pane
              v-for="(item, index) in tabsList"
              :key="index"
              :label="item"
            >
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :header-cell-style="{ background: '#e1e4e5' }"
              >
                <el-table-column prop="username" label="用户名">
                </el-table-column>
                <el-table-column prop="InvestRecordNum" label="投资编号">
                </el-table-column>
                <el-table-column prop="productName" label="投资产品">
                </el-table-column
                ><el-table-column prop="investDate" label="投资时间">
                </el-table-column>
                <el-table-column prop="period" label="投资天数">
                </el-table-column>
                <el-table-column prop="notMatchedMoney" label="待匹配金额">
                </el-table-column>
                <el-table-column
                  prop="matchStatus"
                  :formatter="stateFormat"
                  label="匹配状态"
                >
                </el-table-column> </el-table
            ></el-tab-pane>
          </el-tabs>
        </div>
        <div class="bottom-box">
          <el-pagination
            @current-change="onPageChange"
            background
            layout="prev, pager, next"
            :page-count="filterData.totalPages"
            :current-page="filterData.curPage"
            :page-size="filterData.perPage"
          >
          </el-pagination>
          <el-button
            v-if="!filterData.type"
            :disabled="!tableData.length"
            type="success"
            @click="startMatch"
            >匹配债权</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      filterData: {
        // 总页数
        totalPages: 1,
        // 当前页
        curPage: 1,
        // 每页显示几条数据
        perPage: 3,
        // 审批状态
        type: 0,
      },
      tabsList: ["待匹配", "已匹配"],
      dateRange: "",
      tableData: [],
    };
  },
  methods: {
    ...mapActions({
      getFunds: "transaction/getFunds",
      matchUp: "transaction/matchUp",
    }),
    getfundsList() {
      this.getFunds(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages;
      });
    },
    // 格式化匹配状态
    stateFormat(row) {
      if (row.matchStatus === 0) {
        return "未匹配";
      } else if (row.matchStatus === 1) {
        return "部分匹配";
      } else if (row.matchStatus === 2) {
        return "已匹配";
      }
    },
    // 当前页码发生变化时的回调
    onPageChange(index) {
      this.filterData.curPage = index;
      this.getfundsList();
    },
    // tab 被选中时触发
    onTabsClick(data) {
      this.filterData.type = parseInt(data.index);
      this.filterData.curPage = 1;
      this.getfundsList();
    },
    // 开始匹配债权
    startMatch() {
      this.matchUp().then((res) => {
        this.$message.success("匹配成功");
        this.getfundsList();
      });
    },
  },
  created() {
    this.getfundsList();
  },
};
</script>
  
  <style lang="scss" scoped>
.app-container {
  .funds-box {
    .date-span {
      margin-right: 20px;
    }
    .filter-btn {
      margin-left: 10px;
    }

    .bottom-box {
      margin-top: 5px;
      display: flex;
      justify-content: space-between;
    }
  }
  .fundsApplyList-box {
    margin-top: 15px;
  }
}
</style>